<template>
    <div class="container">
        <header>订单列表</header>
        <el-form :model="queryForm"
                 label-width="100px"
                 :inline="true"
                 class="demo-ruleForm">
            <el-form-item label="活动列表">
                <el-select v-model="queryForm.activityId"
                           clearable
                           @change="querySelectChange"
                           filterable
                           placeholder="请选择活动">
                    <el-option v-for="item in activityArr"
                               :label="item.name"
                               :value="item.id"
                               :key="item.id">
                        <!-- 展示活动id 不然名字一样没法区分 -->
                        <span style="float: left">{{ item.name }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="订单号">
                <el-input v-model="queryForm.bargainOrderNo" :clearable="true" placeholder="请输入订单号"></el-input>
            </el-form-item>
            <el-form-item label="下单用户">
                <el-input v-model="queryForm.phoneNum" :clearable="true" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchData">查询
                </el-button>
            </el-form-item>
        </el-form>
        <div class="table">
            <el-table border
                      align="center"
                      header-align="center"
                      tooltip-effect="dark"
                      :data="tableData"
                      width="100%"
                      style="text-align: center;">
                <el-table-column type="index" width="50"></el-table-column>
                <el-table-column prop="bargainOrderNo" label="订单号" width="280"></el-table-column>
                <el-table-column width="100px" prop="activityId" label="活动Id"></el-table-column>
                <el-table-column min-width="200px" prop="bargainGoodsName" label="商品名称"></el-table-column>
                <el-table-column min-width="120" prop="definedOrderUer" label="下单用户手机号"></el-table-column>
                <el-table-column prop="recipientPhoneNum" width="120" label="充值号码"></el-table-column>
                <el-table-column prop="bargainGoodsCount" width="120" label="购买商品数量"></el-table-column>
                <el-table-column prop="amountPayable" width="120" label="应付积分"></el-table-column>
                <el-table-column prop="state" width="120" label="订单状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.state==='NO_PAY'">未支付</span>
                        <span v-if="scope.row.state==='PAY_FAIL'">支付失败</span>
                        <span v-if="scope.row.state==='OVERDUE'">已过期</span>
                        <span v-if="scope.row.state==='PAY_COMPLETED'">支付完成</span>
                        <span v-if="scope.row.state==='RECHARGE_ING'">充值中</span>
                        <span v-if="scope.row.state==='RECHARGE_FAIL'">充值失败</span>
                        <span v-if="scope.row.state==='CHARGE_COMPLETED'">充值完成</span>
                        <span v-if="scope.row.state==='SCORE_COMPLETED'">积分支付完成</span>
                        <span v-if="scope.row.state==='REISSUE'">已补发</span>
                        <span v-if="scope.row.state==='REFUND'">已退款</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" :formatter="timeFormat" width="200"></el-table-column>
                <el-table-column prop="sourceType" label="订单来源" :formatter="typeFormat" width="120"></el-table-column>
                <el-table-column prop="memberFareAward" label="充值话费" :formatter="orderMoneyFmt"
                                 width="120"></el-table-column>
                <el-table-column prop="score" label="实际支付积分" width="120"></el-table-column>
                <!-- <el-table-column min-width="200px" fixed="right" label="操作">
                  <template slot-scope="scope">
                    <el-button class="pan-btn red-btn"
                               @click="showDetail(scope.row, scope.$index)">详情</el-button>
                    <el-button class="pan-btn green-btn"
                               @click="exportHandle(scope.row, scope.$index)">导出
                    </el-button>
                  </template>
                </el-table-column> -->
            </el-table>
        </div>
        <div class="footer">
            <el-pagination layout="prev, pager, next, jumper"
                           :page-size='10'
                           :total="total"
                           :current-page.sync="currentPageNum"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import {parseTime} from '@/utils/index'

    export default {
        name: 'Order',
        data() {
            return {
                queryForm: {
                    activityId: '',
                    phoneNum: '',
                    bargainOrderNo: ''
                },
                tableData: [],
                total: 1,
                currentPageNum: 1,
                pageSize: 10,
                pageNum: 0,
                activityArr: []
            }
        },
        mounted() {
            this.getActivityList()
            this.search(0)
        },
        watch: {
            pageNum() {
                this.currentPageNum = this.pageNum + 1
            }
        },
        methods: {
            timeFormat(row, column) {
                const date = row[column.property]
                return parseTime(date)
            },
            querySelectChange() {
                this.pageNum = 0
            },
            searchData() {
                this.search('0')
            },
            getActivityList() {
                const _this = this
                _this.axios({
                    url: '/activityConsole/activityBargain/getActivityList'
                }).then(res => {
                    console.log(res)
                    if (res.data.status === '200') {
                        _this.activityArr = res.data.data
                        console.log(_this.activityArr)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            search(page) {
                console.log(this.queryForm.activityId)
                const that = this
                that.axios.get('/activityConsole/activityBargain/getGoodsOrderMessage', {
                    params: Object.assign({
                        pageNum: page || that.pageNum,
                        pageSize: that.pageSize
                    }, that.queryForm)
                }).then(function (res) {
                    console.log(res.data)
                    if (res.data.status == '200') {
                        that.tableData = res.data.data
                        that.total = parseInt(res.data.description)
                    }
                }).catch(function (error) {
                    console.log(error)
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`)
            },
            handleCurrentChange(val) {
                this.pageNum = parseInt(val) - 1
                this.search()
            },
            showDetail(item, index) {
                this.$router.push({path: 'DayData', query: {activityId: item.activityId}})
            },
            exportHandle(item, index) {
                window.location.href = '/activityConsole/data-statists/export-day-data?activityId=' + item.activityId
            },
            typeFormat(row, column, cellValue, index) {
                switch (cellValue) {
                    case 'CLUB':
                        return '俱乐部'
                    case 'BARGIAN_GOODS':
                        return '砍价商品'
                    case 'ACTIVITY':
                        return '活动营销平台'
                    case 'OTHER_ACTIVITY':
                        return '其他活动专用'
                }
                return cellValue
            },
            orderMoneyFmt(row, column, cellValue, index) {
                cellValue = cellValue / 100;
                if (cellValue <= 0) {
                    return '';
                } else {
                    return cellValue + '元'
                }
            }
        }
    }
</script>
<style scoped>
    body .el-table th.gutter {
        display: table-cell !important;
    }

    body .el-table colgroup.gutter {
        display: table-cell !important;
    }

    header {
        margin-bottom: 10px;
    }

    .footer {
        margin-top: 10px;
        text-align: center;
    }
</style>
